import React from 'react';
import { connect } from 'react-redux';
import * as routerActions from 'react-router-redux';
import Api from 'Utils/api';
import dialog from 'Utils/dialog';
import Title from 'Page/CommonComponents/Title';
import moment from 'moment/moment';
import './../interactive.scss';

class ExamPage extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      dynamicData: [],
      currentPage: 1,
      pageSize: 100,
      data: []
    };
    this.renderDynamic = ::this.renderDynamic;
    this.renderInfo = ::this.renderInfo;
  }
  componentWillMount() {
    this.getList();
    this.initData();
  }
  getList() {
    const api = new Api({
      method: 'GET',
      path: '/testers/admin',
      success: (json) => {
        this.setState({
          dynamicData: json.data_list.slice(0, 5),
        });
      },
      error: (msg) => {
        const buttons = [
          {
            label: '知道了',
            onClick: () => {},
          },
        ];
        dialog.open('提示', msg, buttons, 'center');
      }
    });
    api.run();
  }
  initData() {
    const { currentPage, pageSize } = this.state;
    const query = {};
    query.limit = pageSize;
    query.offset = (currentPage - 1) * pageSize;
    const api = new Api({
      method: 'GET',
      path: '/testers/user_top',
      query,
      success: (res) => {
        this.setState({
          data: res.data_list,
        });
      },
      error: (msg) => {
        const buttons = [
          {
            label: '知道了',
            onClick: () => {},
          },
        ];
        dialog.open('提示', msg, buttons, 'center');
      }
    });
    api.run();
  }
  handleLogin() {
    this.props.dispatch(routerActions.push('/exam/login'));
  }
  renderDynamic() {
    const { dynamicData } = this.state;
    const nodeInfo = [];
    for (let i = 0, len = dynamicData.length; i < len; i++) {
      nodeInfo.push((
        <div className="dynamic-row" key={i}>
          <span className="name">{dynamicData[i].name}</span>
          <span className="label">参与了{dynamicData[i].type}测评</span>
          <span className="time">{dynamicData[i].modify_time ? moment(dynamicData[i].modify_time).format('HH:mm') : ''}</span>
        </div>
      ))
    }
    return nodeInfo;
  }
  renderInfo() {
    const { data } = this.state;
    const nodeInfo = [];
    for (let i = 0, len = data.length; i < len; i++) {
      nodeInfo.push((
        <div className="info-row" key={i}>
          <span className="score">{i + 1}</span>
          <span className="score-name">{data[i].name || ''}</span>
          <span className="score">{data[i].score || ''}</span>
        </div>
      ))
    }
    return nodeInfo;
  }
  render() {
    const { dynamicData, data } = this.state;
    return (
      <div className="interactive-page">
        <Title title="知识测评" />
        <div className="interactive-content-wrap">
          <div className="top-wrap" onClick={this.handleLogin.bind(this)}>
            <img src="images/icon_exam.png" alt="" />
            <div className="label">我要测评</div>
          </div>
          <div className="middle-wrap">
            <div className="middle-title">最新动态</div>
            <div className="middle-content-wrap">
              {
                dynamicData.length > 0 && this.renderDynamic()
              }
            </div>
          </div>
          <div className="bottom-wrap">
            <div className="bottom-title">英雄榜TOP10</div>
            <div className="head-wrap">
              <span className="score">序号</span>
              <span className="score-name">姓名</span>
              <span className="score">得分</span>
            </div>
            <div className="content-wrap">
              { data.length > 0 ? this.renderInfo() : ''}
            </div>
          </div>
        </div>
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    ...state.routing,
  };
}
export default connect(mapStateToProps)(ExamPage);
